<script setup>
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance()
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

// 封装 方法 字典查询
const {
  customer_complaints_order_type, // 订单状态
  customer_affiliated_organization //所属机构
} = proxy.useDict('customer_complaints_order_type', 'customer_affiliated_organization')

const emit = defineEmits(['reset', 'submit'])

const title = ref('新增')

const ruleFormRef = ref(null)

const BtnLoading = ref(false)

const loading = ref(false)

const TableData = ref([])

const selection = ref([])
const materialShow = ref(false)

if (props.data) {
  TableData.value = props.data.materialList || []
}

// 删除
const remove = () => {
  if (selection.value.length > 0) {
    selection.value.forEach(item => {
      const Find = TableData.value.findIndex(itemy => item.materialId == itemy.materialId)
      TableData.value.splice(Find, 1)
    })
  } else {
    TableData.value.splice(TableData.value.length - 1, 1)
  }
}

// 选择的物料
const preservation = row => {
  row.batchNum = ''
  TableData.value = [row]

  TableData.value[0].orderType = row.materialType
  materialShow.value = false
}

// 列表选中 及 判断是否禁用删除 || 修改
const handleSelectionChange = selection => {
  selection.value = selection
}

// 提交
const submit = () => {
  if (TableData.value.length < 1) {
    proxy.warningMsg('请填写明细项')
    return false
  }
  return TableData.value
}

defineExpose({ submit })
</script>

<template>
  <div class="app-container">
    <div class="flex-items-center flex-between">
      <div class="title">明细项</div>
      <div class="caozuo" v-if="!props.disabled">
        <el-tooltip class="box-item" effect="dark" content="添加" placement="top-start">
          <el-icon @click="materialShow = true"><Plus /></el-icon>
        </el-tooltip>
        <div style="margin: 0 10px"></div>
        <el-tooltip class="box-item" effect="dark" content="勾选删除" placement="top-start">
          <el-icon @click="remove()"><Minus /></el-icon>
        </el-tooltip>
      </div>
    </div>
    <!-- 表格数据 -->
    <el-table
      v-loading="loading"
      stripe
      border
      :data="TableData"
      style="margin-top: 10px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" fixed="left" />
      <el-table-column label="序号" width="70" type="index" />
      <el-table-column label="物料编码" prop="materialCode" width="120" />
      <el-table-column label="物料名称" prop="materialName" width="120" />
      <el-table-column label="物料规格" prop="materialSpec" width="120" />
      <!-- <el-table-column label="批次号" width="120">
        <template #default="scope">
          <el-input v-model="scope.row.batchNum" :disabled="props.disabled"></el-input>
        </template>
      </el-table-column> -->
      <el-table-column label="铺网类型" prop="materialNetTypeDict" width="120" />
      <el-table-column label="网型" prop="materialNetDict" width="120" />
      <el-table-column label="配比" prop="materialRatio" width="120" />
      <el-table-column label="克重(g/m^2)" prop="materialGheavy" width="120" />
      <el-table-column label="幅宽(mm)" prop="customerName" width="120" />
      <el-table-column label="卷径(cm)" prop="customerName" width="120" />
      <el-table-column label="质量标准" prop="customerName" width="120" />
    </el-table>
    <p-XiaoheDialog :dialogVisible="materialShow" title="物料选择" width="50%" @close="materialShow = false">
      <template #body>
        <Material
          :dict="[
            { label: '成品', value: 4 },
            { label: '半成品', value: 3 },
            { label: '原料', value: 1 }
          ]"
          @preservation="preservation"
        />
      </template>
    </p-XiaoheDialog>
  </div>
</template>

<style lang="scss" scoped>
.caozuo {
  float: right;
  display: flex;
  margin-bottom: 10px;
  justify-content: space-evenly;
}
</style>
